<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CCOJ</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        accent: '#f97316',
                        borderGreen: '#22c55e'
                    }
                }
            }
        }
    </script>
    <style>
        @keyframes cheer {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-8px) rotate(5deg); }
            50% { transform: translateY(0) rotate(0deg); }
            75% { transform: translateY(-8px) rotate(-5deg); }
        }
        .cheer-person {
            animation: cheer 1.5s ease-in-out infinite;
        }
        .cheer-person-left {
            animation-delay: 0.2s;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center p-4">
    <div class="w-full max-w-md border-4 border-borderGreen rounded-2xl p-8 bg-white shadow-md flex flex-col items-center justify-center">
        <div class="flex items-center justify-center space-x-4 mb-12">
            <div class="cheer-person cheer-person-left text-primary text-4xl">
                <i class="fa fa-smile-o"></i>
                <i class="fa fa-hand-paper-o ml-1 -rotate-12"></i>
            </div>
            
            <div class="text-center">
                <div class="flex items-center justify-center space-x-2 mb-2">
                    <i class="fa fa-code text-primary text-3xl"></i>
                    <h1 class="text-5xl font-bold text-gray-800">CCOJ</h1>
                </div>
                <p class="text-gray-500 text-lg">在线OJ评测系统</p>
            </div>
            
            <div class="cheer-person text-primary text-4xl">
                <i class="fa fa-hand-paper-o mr-1 rotate-12"></i>
                <i class="fa fa-smile-o"></i>
            </div>
        </div>

        <!-- 修正后的链接按钮，整个橙色区域可点击 -->
        <a href="/acq_all_questions" class="bg-accent hover:bg-orange-500 text-white px-8 py-4 rounded-lg text-xl font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 flex items-center">
            <i class="fa fa-rocket mr-2"></i>开始挑战
        </a>
    </div>
</body>
</html>
